<template>
    <div class="edit-single"  :style="{
      width:Math.round(item.cptWidth)+'px',
      height:Math.round(item.cptHeight)+'px',
      top:Math.round(item.cptY)+'px',
      left:Math.round(item.cptX)+'px',
      transform: 'rotate('+item.cptRotate+'deg)',
      zIndex: selected ? 1800 + (length - index - 1) : length-(index+1)
    }" tabindex="0">
      <div v-show="false" style="position: fixed;border-top: 1px dashed #2589ff;width: 100%;left:0"/><!--顶部辅助线-->
      <div v-show="false" style="position: fixed;border-right: 1px dashed #2589ff;height:100%;top:0"/><!--左侧辅助线-->
      <!-- 2021-12-28新增iframe组件，防止焦点聚焦在iframe内部，添加此蒙版 -->
      <div  class="activeMask" :style="selected ? {border:'1px solid #2589ff'}:{}"/>
      <div style="width: 100%;height: 100%;" v-resize="'move'">
        <component :is="item.cptKey" :ref="item.id" :width="Math.round(item.cptWidth)" :height="Math.round(item.cptHeight)" :option="item.cptOption" :value="item.cptOption"/>
      </div>
      <div v-show="selected" style="top: 0;left: 0;cursor: se-resize;transform: translate(-50%, -50%)" class="resizeTag" v-resize="'lt'"  />
      <div v-show="selected" style="top: 0;left: 50%;cursor: s-resize;transform: translate(-50%, -50%)" class="resizeTag" v-resize="'t'"  />
      <div v-show="selected" style="top: 0;right: 0;cursor: ne-resize;transform: translate(50%, -50%)" class="resizeTag" v-resize="'rt'"  />
      <div v-show="selected" style="top: 50%;right: 0;cursor: w-resize;transform: translate(50%, -50%)" class="resizeTag" v-resize="'r'"  />
      <div v-show="selected" style="bottom: 0;right: 0;cursor: se-resize;transform: translate(50%, 50%)" class="resizeTag" v-resize="'rb'"  />
      <div v-show="selected" style="bottom: 0;left: 50%;cursor: s-resize;transform: translate(-50%, 50%)" class="resizeTag" v-resize="'b'"  />
      <div v-show="selected" style="bottom: 0;left: 0;cursor: ne-resize;transform: translate(-50%, 50%)" class="resizeTag" v-resize="'lb'"  />
      <div v-show="selected" style="top: 50%;left: 0;cursor: w-resize;transform: translate(-50%, -50%)" class="resizeTag" v-resize="'l'"  />
    </div>
</template>

<script>
import resize from '@/views/designer/directives/resize'

export default {
  name: 'edit-single',
  cnName: '单个组件',
  props: {
    item: Object, // 组件数据
    index: Number, // 下标位置
    length: Number,
    currentCptIndex: Number, // 当前单选选中index
    selected: Boolean // 选中的对象集合
  },
  data() {
    return {}
  },
  methods: {},
  directives: {
    resize
  }
}
</script>

<style lang="less" scoped>
.edit-single {
  position: absolute;

  .activeMask{width: 100%;height: 100%;position: absolute;z-index: 1801; pointer-events: none;}

  .resizeTag{width: 8px;height: 8px;position: absolute;background-color: #B6BFCE;z-index: 2000;border-radius: 50%;}

  &:hover {
    .shape-modal {
      border-width: 1px;
    }
  }

}
</style>
